<template>
  <div class="login_container">
    <div class='total_title'>人体净尺寸测量及三维模型重建系统</div>
    <div class="login_box">
      <!-- 头像框部分 -->
      <div class="avatar_box">
        <img src="../assets/head.jpg">
      </div>
      <div class="login_form">
        <!-- 表单部分 -->
        <Form ref="login_ref" :model="formInline" :rules="ruleInline" label-position="left" label-width="100">
          <FormItem prop="user" label="用户名">
              <Input type="text" v-model="formInline.user" placeholder="Username" size="large">
                  <Icon type="ios-person-outline" slot="prepend"></Icon>
              </Input>
          </FormItem>
          <FormItem prop="password" label="密码">
              <Input type="password" v-model="formInline.password" placeholder="Password" size="large">
                  <Icon type="ios-lock-outline" slot="prepend"></Icon>
              </Input>
          </FormItem>
          <FormItem class="btn_form_item">
              <Button type="primary" @click="login" size="large">登录</Button>
              <Button type="primary" size="large" class="register_btn">注册</Button>
          </FormItem>
        </Form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      // 表单数据绑定
      formInline: {
        user: '',
        password: ''
      },
      ruleInline: {
        user: [
            { required: true, message: 'Please fill in the user name', trigger: 'blur' }
        ],
        password: [
            { required: true, message: 'Please fill in the password.', trigger: 'blur' },
            { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    reset_form () {
      this.$refs.login_ref.resetFields()
    },
    login: function () {
      this.$refs.login_ref.validate(async result => {
        if (!result) {
          return false
        } else {
          this.$message({
            message: '用户名不存在，请先注册账号'
          })
          // this.$message({
          //   message: '登陆失败，密码或账号错误',
          //   type: 'error'
          // })
          // this.$message({
          //   message: '登录成功，3秒后将跳转系统主界面',
          //   type: 'success'
          // })
          // 注意因为$http为Vue的prototype方法，所以其组件可以直接通过this使用
          const { data: res } = await this.$http.post('/login', this.login_form)
          if (res.meta.status === 200) {
            // 消息的使用方式
            this.$message.success('登录成功')
            // 将登录成功后的token保存在客户端的sessionStorage中
            // 保存在sessionStorage中只在当前网站打开的时候生效，localStorage是长期存储
            window.sessionStorage.setItem('token', res.data.token)
            // 编程式导航跳转到后台主页
            this.$router.push('/home')
          } else {
            this.$message.error('登录失败')
          }
        }
      })
    }
  }
}
</script>

<style lang="less">
  .total_title {
    margin: auto;
    color: #00447C;
    font-size: 40px;
    text-align: center;
    padding-top: 5%;
    font-weight: bold;
  }
  .login_container {
    height: 100%;
    background-color: #c9dceb;
  }
  .login_box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 450px;
    height: 300px;
    border-radius: 3px;
    background-color: #00447C;
    transform: translate(-50%, -50%);
    .avatar_box {
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 130px;
      height: 130px;
      border-radius: 75px;
      padding: 10px;
      box-shadow: 0 0 10px #ddd;
      background-color: #fff;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .login_form {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
    }
    .register_btn {
      margin-left: 30px;
    }
    .btn_form_item {
      position: relative;
    }
    .el-form-item__label {
      color: #fff!important;
    }
  }
</style>
